<template>
  <view class="login-bg">
    <view class="login-card">
      <view class="login-logo">
        <image src="/static/icons/face-test.png" mode="aspectFill"></image>
      </view>
      <view class="login-title">{{ $t('login.title') }}</view>
      <view class="input-wrap">
        <input class="login-input" v-model="username" :placeholder="$t('login.userName')"
          placeholder-class="input-placeholder" maxlength="20" />
      </view>
      <view class="input-wrap">
        <input class="login-input" v-model="password" type="password" :placeholder="$t('login.password')"
          placeholder-class="input-placeholder" maxlength="20" />
      </view>
      <button class="login-btn" @click="handleLogin">{{ $t('login.btn') }}</button>
      <view class="login-bottom">
        <text class="register-text" @click="handleResetPwd">{{ $t('login.forgotPassword') }}</text>
        <text class="register-text" @click="handleRegister">{{ $t('login.register') }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { loginApi } from '@/api/user.js'
import { useUserStore } from '@/store/user.js'
import { useI18n } from 'vue-i18n'
import { onLoad } from '@dcloudio/uni-app'

const { t } = useI18n()

const username = ref('')
const password = ref('')

const userStore = useUserStore()

onLoad(() => {
  uni.setNavigationBarTitle({
    title: t('login.title')
  })
})

const handleLogin = async () => {
  if (!username.value.trim()) {
    uni.showToast({ title: t('login.user_name_empty'), icon: 'none' })
    return
  }
  if (!password.value) {
    uni.showToast({ title: t('login.password_empty'), icon: 'none' })
    return
  }
  if (username.value.trim().length < 3) {
    uni.showToast({ title: t('login.user_name_length'), icon: 'none' })
    return
  }
  if (password.value.length < 6) {
    uni.showToast({ title: t('login.usepassword_lengthr_name_length'), icon: 'none' })
    return
  }

  try {
    const res = await loginApi({ username: username.value.trim(), password: password.value })

    if (res.code === 200) {
      userStore.loginSuccess(res.result)
      uni.showToast({ title: t('login.Login_successful'), icon: 'success' })
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }, 200)
    } else {
      uni.showToast({ title: res.message || t('login.Login_failed'), icon: 'error' })

    }
  } catch (e) {
    console.error('登录异常:', e)
    uni.showToast({ title: t('common.502BadRequest'), icon: 'none' })
  }
}

const handleRegister = () => {
  uni.navigateTo({ url: '/pages/register/index' })
}
function handleResetPwd() {
  uni.navigateTo({ url: '/pages/resetpwd/index' })
}
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}

.login-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60rpx;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 92vw;
}

.login-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 18px;
  background: #fffbe6;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 60px;
    height: 60px;
  }
}

.login-title {
  font-size: 20px;
  font-weight: bold;
  color: #222;
  margin-bottom: 26px;
  letter-spacing: 1px;
}

.input-wrap {
  width: 100%;
  margin-bottom: 16px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 44px;
  box-sizing: border-box;
}

.login-input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 15px;
  padding: 0 14px;
}

.login-input:focus {
  border-color: #ffd700;
  background: #fff;
}

.input-placeholder {
  color: #bbb;
  font-size: 15px;
}

.login-btn {
  width: 100%;
  background: #1296db;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  margin-top: 6px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.08);
  transition: background 0.2s;
}

.login-btn:active {
  background: #19719f;
}

.login-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.register-text {
  color: #ffb300;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
</style>
